<template>
	<view>
		<view class="comment-content" v-for="(item,index) in comments" :key='index'>
			<comment-box :item='item'></comment-box>
		</view>
		<uni-load-more :status="loading" v-if="comments.length === 0 || comments.length > 5" iconType="snow"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				acticleId: '',
				comments: [],
				page: 1,
				pageSize: 2,
				loading:'loading'
			}
		},
		onLoad(query) {
			this.acticleId = query.id
			this.getComments()
		},
		onReachBottom() {
			if(this.loading === 'noMore') return
			this.page++
			this.getComments()	
		},
		methods: {
			getComments() {
				this.$api.getComment({
					acticleId: this.acticleId,
					page: this.page,
					pageSize: this.pageSize
				}).then(res => {
					const {
						data
					} = res
					if(data.length === 0){
						this.loading = 'noMore'
						return
					}
					// 对象复制
					let temp = JSON.parse(JSON.stringify(this.comments))
					temp.push(...data)
					this.comments = temp
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comment-content {
		padding: 0 15px;
	}
</style>
